<template>
  <div class="selector" v-focus>
    <selector-input
      :placeholder="placeholder"
      :inputValue="inputValue"
      @searchOptions="searchOptions"
    ></selector-input>
    <selector-menu
      :data="selectorInputData"
      @setItemValue="setItemValue"
      :searchValue="searchValue"
    ></selector-menu>
  </div>
</template>

<script>
import focus from "../directives/focus";
import SelectorInput from "./Input.vue";
import SelectorMenu from "./Menu.vue";

export default {
  name: "MySelector",
  components: {
    SelectorInput,
    SelectorMenu,
  },
  props: {
    placeholder: String,
    selectorInputData: Array,
  },
  directives: {
    focus,
  },
  data() {
    return {
      //点击某一项的内容
      inputValue: "",
      //用户输入的内容
      searchValue: "",
    };
  },
  methods: {
    //点击列表中的某一项时
    setItemValue(item) {
      //设置输入框的内容为点击某一项的内容
      this.inputValue = item.text;

      //向上传递事件给用户修改
      this.$emit("setItemValue", item.value);
    },
    //当用户输入框输入内容时
    searchOptions(value) {
      this.searchValue = value;
    },
  },
};
</script>

<style lang="scss" scoped>
.selector {
  position: relative;
  width: 300px;
}
</style>
